<!--
 * VUE节点
-->
<template>
  <div>
    <div id="containered" ref="containered" />
  </div>
</template>

<script lang="ts" setup>
/*eslint-disable */
import { ref, onUnmounted, onMounted } from 'vue'
import { Graph, Shape } from '@antv/x6';
import './ts/register';
import ChannelReferral from "./shape/channelReferral.vue";

const graph = ref<any>({}) // 流程图
const containered = ref<HTMLElement>() // 流程图挂载dom节点

/** 注意在 vue.config.js 配置参数
 * module.exports = {
    runtimeCompiler: true,
  }
 */

const init = () => {
  graph.value = new Graph({
    container: containered.value,
    width: 800,
    height: 600,
    background: {
      color: '#fffbe6', // 设置画布背景颜色
    },
    grid: {
      size: 10,      // 网格大小 10px
      visible: true, // 渲染网格背景
    },
    snapline: { // 对齐线
    enabled: true,
    sharp: true, // 是否显示截断的对齐线-对齐线变短
    },
    selecting: { // 点选/框选，默认禁用。
      enabled: true,
      // rubberband: true, // 框选
      // 是否显示节点的选择框，默认为 false，建议使用下面的样式定制方法去定制自己的选择框样式。
      // showNodeSelectionBox: true // 节点的选择框
    },
    keyboard: { // 键盘事件可用于绑定快捷键
      enabled: true
    },
    // 开启撤销/重做
    history: {
      enabled: true,
      ignoreChange: true
    },
    // 剪切板用于复制/粘贴节点和边，并支持跨画布的复制/粘贴，创建画布时通过以下配置启用。
    clipboard: {
      enabled: true
      // useLocalStorage: true // 保存到 localStorage
    },
    // panning: true, // 普通画布(未开启 scroller 模式)通过开启 panning 选项来支持拖拽平移。
    // 使画布具备滚动、平移、居中、缩放等能力
    scroller: {
      enabled: true,
      pageVisible: false, // 是否分页，默认为 false。
      pageBreak: false, // 是否显示分页符，默认为 false。
      pannable: true // 启用画布平移
    },
    mousewheel: { // 鼠标滚轮缩放
      enabled: true,
      // 是否为全局事件，设置为 true 时滚轮事件绑定在 document 上，否则绑定在画布容器上。默认为 false。
      global: true,
      modifiers: ['ctrl', 'meta']
    },
    highlighting: {
      // 连线过程中，节点可以被链接时被使用
      // nodeAvailable: {},
      // 拖动节点进行嵌入操作过程中，节点可以被嵌入时被使用
      embedding: {
        name: 'stroke',
        args: {
          attrs: {
            fill: '#fff',
            stroke: '#47C769',
          },
        },
      },
      // 连线过程中，链接桩可以被链接时被使用
      magnetAvailable: { // 高亮
        name: 'stroke',
        args: {
          attrs: {
            fill: '#fff',
            stroke: '#47C769',
          },
        },
      },
      // 连线过程中，自动吸附到链接桩时被使用
      magnetAdsorbed: {
        name: 'stroke',
        args: {
          attrs: {
            fill: '#fff',
            stroke: '#31d0c6',
          },
        },
      },
    },
  });
  graph.value.addNode({
    shape: 'my-shape',
    width: 64,
    height: 64,
    x: 40,
    y: 40,
    component: {
      template: `<channel-referral :text="text" />`,
      data() {
        return {
          text:'AB测试',
        }
      },
      components: {
        ChannelReferral,
      },
    },
  })

  graph.value.addNode({
    shape: 'my-shape',
    width: 64,
    height: 64,
    x: 240,
    y: 40,
    component: {
      template: `<channel-referral :text="text" />`,
      data() {
        return {
          text:'AB测试',
        }
      },
      components: {
        ChannelReferral,
      },
    },
  })
}


onMounted(() => {
  init()
})

onUnmounted(() => {
  graph.value.dispose() // 销毁画布
})


</script>